<template>
  <view v-if="$accessCheck($Access.InventoryOutGetAllInventoryOut)">
    <view
      class="tabs-view"
      v-if="$accessCheck($Access.InventoryOutSearchAllInventoryOut)"
    >
      <view class="keyword-view clearfix">
        <view class="float_left">
          <u-search
            :show-action="false"
            @clear="searchData()"
            @search="searchData()"
            :clearabled="true"
            placeholder="单号/制单人"
            v-model="search_form.search"
          ></u-search>
        </view>
        <view class="float_right" @click="openSel('search_show')"
          ><text class="custom-icon custom-icon-shaixuan"></text
        ></view>
      </view>
      <u-tabs-swiper
        v-if="$accessCheck($Access.InventoryOutStatisticsAllInventoryOut)"
        ref="tabs"
        font-size="28"
        :current="tabs_current"
        :list="tabs_list"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs-swiper>
    </view>
    <view
      class="list-ul"
      v-if="$accessCheck($Access.InventoryOutGetInventoryOutInfo)"
    >
      <view
        class="list-li clearfix"
        @click="goPage('/pagesT/stock/SaleOutDetail?id=' + item.id)"
        v-for="(item, index) in outgoing_list"
        :key="index"
      >
        <view class="title clearfix">
          <view
            v-if="item.typeName !== '调拨出库'"
            class="float_left"
            style="font-size: 28rpx; font-weight: 700"
            >{{ item.customerName || "--" }}</view
          >
          <view
            v-else
            class="float_left"
            style="font-size: 28rpx; font-weight: 700"
            >{{ item.warehouseName || "--" }}</view
          >
          <view class="float_right">
            <span v-if="item.auditStatus === 1" class="warning-status"
              >待审核</span
            >
            <span v-else class="success-status">已审核</span>
          </view>
        </view>
        <view class="list-cont">
          <view class="list-cont-li">类型：{{ item.typeName }}</view>
          <view class="list-cont-li"
            >日期：{{ $u.timeFormat(item.createTime, "yyyy-mm-dd") }}</view
          >
          <view class="list-cont-li clearfix">
            单号：
            <text @click.stop="copy(item.no)">{{ item.no }}</text>
          </view>
          <view class="list-cont-li clearfix"
            >制单人：{{ item.operatorName }}</view
          >
          <view class="price">
            <text>{{ $utils.formattedNumber(item.amount) }}</text>
            <text class="custom-icon custom-icon-jinru"></text>
          </view>
          <view
            v-if="item.auditStatus === 1"
            class="scan-btn"
            @click.stop="
              goPage('/pagesT/stock/SweepCodeOutbound?id=' + item.id)
            "
            >扫码出库</view
          >
        </view>
      </view>
      <u-popup v-model="search_show" mode="right">
        <view class="search-pop">
          <view class="form-view">
            <u-form label-width="160rpx" label-position="left">
              <u-form-item label-position="top" label="制单日期">
                <view class="date-li">
                  <picker mode="date" @change="bindDateStartChange">
                    <text class="date-li">{{
                      search_form.startTime
                        ? $u.timeFormat(search_form.startTime, "yyyy-mm-dd")
                        : "开始日期"
                    }}</text>
                  </picker>
                </view>
                <view class="date-line">-</view>
                <view class="date-li">
                  <picker mode="date" @change="bindDateEndChange">
                    <text class="date-li">{{
                      search_form.endTime
                        ? $u.timeFormat(search_form.endTime, "yyyy-mm-dd")
                        : "结束日期"
                    }}</text>
                  </picker>
                </view>
              </u-form-item>
              <u-form-item label="仓库">
                <view
                  class="clearfix form-val"
                  @click="goPage('/pagesT/werahouse/selWerahouse')"
                >
                  <text class="float_left ellipsis">{{
                    search_form.warehouseId ? warehouse_name : "请选择"
                  }}</text>
                  <view
                    class="float_right"
                    @click.stop="clearValue('warehouseId')"
                  >
                    <u-icon
                      :name="
                        !search_form.warehouseId
                          ? 'arrow-right'
                          : 'close-circle-fill'
                      "
                      size="28"
                      color="#999999"
                    ></u-icon>
                  </view>
                </view>
              </u-form-item>
              <u-form-item label-position="top" label="审核状态">
                <view style="font-size: 22rpx; color: #6c6c6c">可多选</view>
                <text
                  v-for="(item, index) in order_status"
                  :key="index"
                  class="check-li"
                  :class="[
                    search_form.auditStatus.indexOf(item.value) > -1
                      ? 'active'
                      : '',
                  ]"
                  @click="statusChange(item)"
                >
                  {{ item.label }}
                </text>
              </u-form-item>
            </u-form>
          </view>

          <view class="search-btn">
            <view class="btn-li btn-reset" @click="clearValue()">重置</view>
            <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
          </view>
        </view>
      </u-popup>
      <view v-if="!outgoing_list.length" class="empty-view"
        ><u-empty text="暂无数据" mode="list"></u-empty
      ></view>
      <u-loadmore v-if="outgoing_list.length" :status="load_status" />
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      search_show: false,
      order_status: [
        { value: 2, label: "已审核" },
        { value: 1, label: "待审核" },
      ],
      tabs_list: [
        {
          name: "销售出库",
          value: 5,
        },
        {
          name: "采购退货",
          value: 14,
        },
        {
          name: "调拨出库",
          value: 8,
        },
        {
          name: "全部单据",
          value: "",
        },
      ],
      load_status: "nomore",
      tabs_current: 0,
      page: 1,
      pageSize: 10,
      total: 0,
      source: 5, // 调拨出库 8; 销售出库 5; 采购退货 14;
      search_form: {
        shopId: "",
        shopName: "",
        auditStatus: [],
        goodsName: "", // 商品名称
        warehouseId: "", // 仓库id
        startTime: "", // 制单开始时间
        endTime: "", // 制单结束时间
      },
      warehouse_name: "",
      outgoing_list: [],
      werahouseData: "",
    };
  },
  watch: {
    werahouseData(val) {
      if (val) {
        this.search_form.warehouseId = val.id;
        this.warehouse_name = val.warehouseName;
      }
    },
  },
  onLoad() {
    this.getAllInventoryOut();
  },
  onReachBottom() {
    if (this.total / this.pageSize > this.page) {
      this.page += 1;
      this.getData();
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getData();
  },
  methods: {
    openSel(key) {
      this[key] = true;
    },
    bindDateStartChange(e) {
      this.search_form.startTime = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_form.endTime = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    // 审核状态切换
    statusChange(row) {
      const index = this.search_form.auditStatus.indexOf(row.value);
      if (index === -1) {
        this.search_form.auditStatus.push(row.value);
      } else {
        this.search_form.auditStatus.splice(index, 1);
      }
    },
    // 搜索确定
    searchConfirm() {
      this.search_show = false;
      this.searchData();
    },
    // 重置搜索
    clearValue(params) {
      if (!params) {
        this.search_form = {
          shopId: "",
          shopName: "",
          auditStatus: [],
          goodsName: "", // 商品名称
          warehouseId: "", // 仓库id
          startTime: "", // 制单开始时间
          endTime: "", // 制单结束时间
        };
        this.searchConfirm();
      } else {
        this.search_form[params] = "";
      }
    },
    tabsChange(index) {
      this.tabs_current = index;
      this.source = this.tabs_list[index].value;
      this.searchData();
    },
    getAllInventoryOut() {
      this.load_status = "loading";
      this.$u.api
        .getAllInventoryOut({
          page: this.page,
          pageSize: this.pageSize,
          type: this.source,
          ...this.search_form,
        })
        .then((res) => {
          if (this.page === 1) {
            this.outgoing_list = res.data;
          } else {
            this.outgoing_list = this.outgoing_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        });
    },
    searchAllInventoryOut() {
      this.load_status = "loading";
      this.$u.api
        .searchAllInventoryOut({
          page: this.page,
          pageSize: this.pageSize,
          type: this.source,
          ...this.search_form,
        })
        .then((res) => {
          if (this.page === 1) {
            this.outgoing_list = res.data;
          } else {
            this.outgoing_list = this.outgoing_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        });
    },
    //  判断
    getData() {
      this.getAllInventoryOut();
      // const isKey = this.$utils.isSerch(this.search_form);
      // if (isKey) {
      // 	this.searchAllInventoryOut();
      // } else {
      // 	this.getAllInventoryOut();
      // }
    },
    searchData() {
      this.page = 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-view {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  .keyword-view {
    padding: 20rpx 24rpx 0;
    background-color: #ffffff;
    z-index: 9;

    .float_left {
      width: 640rpx;
    }

    .float_right {
      line-height: 64rpx;
      width: 50rpx;
      text-align: center;
      color: #666666;
    }
  }
}
.list-ul {
  padding-top: 160rpx;
  .list-li {
    width: 710rpx;
    margin: 20rpx auto;
    padding: 0 24rpx 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    .title {
      line-height: 80rpx;
      border-bottom: 1px solid #eeeeee;
      .float_left {
        font-weight: bold;
      }
      .float_rigth {
        .custom-icon-jinru {
          margin-left: 10rpx;
          font-size: 28rpx;
        }
      }
    }
    .list-cont {
      margin-top: 10rpx;
      position: relative;
      .scan-btn {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 160rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        border: 2rpx solid #b8c0c8;
        font-size: 24rpx;
        font-weight: 400;
        color: #2d405e;
        border-radius: 8rpx;
      }
      .price {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        right: 0;
        font-weight: bold;
        color: $uni-color-error;
        .custom-icon-jinru {
          font-size: 28rpx;
          color: #6c6c6c;
          font-weight: 400;
        }
      }
      .list-cont-li {
        line-height: 40rpx;
        font-size: 24rpx;
        color: #666666;
        .mobile {
          color: $uni-color-primary;
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
.search-pop {
  .active {
    border-color: #fb5904 !important;
    color: #fb5904 !important;
  }
}
</style>
